<template>
	<div>
		<div style="position: absolute; z-index: 99999; right: 25px; top: 20px; right: 40px">
			<el-button type="primary" @click="subResult" size="small">确 定</el-button>
		</div>

		<div id="infoDiv"></div>

		<div>
			<el-input style="padding-top: 10px" v-model="inputAddr" placeholder="输入搜索的地点" class="input-with-select">
				<template #append>
					<el-button type="primary" size="small" @click="handSearchMap">搜索</el-button>
				</template>
			</el-input>

			<div style="margin-top: 10px">
				<el-radio-group v-model="selectAddr">
					<el-row :gutter="24" v-for="(item, index) in clickData" :key="index">
						<el-col :span="24"> <el-radio :label="item.address + item.name" :name="item" /> <br /> </el-col>
					</el-row>
					<el-divider border-style="dotted" />
				</el-radio-group>
			</div>
		</div>
	</div>
</template>

<script>
import { reactive, ref, onMounted, toRefs } from 'vue';
import { getLonLatService } from '/@/api/linkoo/form';
import mixins from '/@/views/linkoo/zmap/index.js';
let { hMapConf } = mixins();
export default {
	props: ['mapType'],
	setup(props, { emit }) {
		let hhxy = reactive({
			T: null,
			map: null,
			startIcon: 'http://lbs.tianditu.gov.cn/images/bus/start.png',
			geocode: null,
			clickData: [],
			localsearch: null,
			inputAddr: '',
			selectAddr: '',
		});

		const init = () => {
			let map = null;
			let T = window.T;
			console.log(window, '1234');
			map = new T.Map('infoDiv');
			map.centerAndZoom(new T.LngLat(120.203862, 30.248028), 13);
			map.addEventListener('click', mouseUpStartMaker);

			let config = {
				pageCapacity: 10,
				onSearchComplete: localSearchResult,
			};
			//创建搜索对象
			hhxy.localsearch = new T.LocalSearch(map, config);
			hhxy.map = map;
			hhxy.T = T;
			hhxy.geocode = new T.Geocoder();
			setTimeout(() => {
				hhxy.map.checkResize();
			}, 100);
			getServiceLonLat();
		};

		const mouseUpStartMaker = (e) => {
			hhxy.map.clearOverLays();
			hhxy.clickData = [];
			console.log('====', e);
			let startLngLat = e.lnglat;
			console.log(startLngLat.getLng() + '======,=====' + startLngLat.getLat());
			hhxy.geocode.getLocation(startLngLat, searchResult);
			addMark(startLngLat.getLng(), startLngLat.getLat());
		};
		const addMark = (lon, lat) => {
			let T = hhxy.T;
			let map = hhxy.map;
			let icon = new T.Icon({
				iconUrl: hhxy.startIcon,
				iconSize: new T.Point(29, 37),
				iconAnchor: new T.Point(10, 25),
			});
			let marker = new T.Marker(new T.LngLat(lon, lat), { icon: icon });
			map.addOverLay(marker);
		};
		//结束处理
		const searchResult = (result) => {
			console.log('2222', result);

			if (result.getStatus() == 0) {
				let location = result.location;
				let locationStr = location.lon + ',' + location.lat;
				let addressComponent = result.getAddressComponent();
				hhxy.clickData.push({
					lonlat: locationStr,
					name: '',
					address: result.getAddress(),
				});

				hhxy.clickData.push({
					lonlat: locationStr,
					name: '',
					address: addressComponent.address,
				});
				console.log('hhxy.clickDatahhxy.clickData', hhxy.clickData);
			} else {
				console.log('获取信息失败', result);
			}
		};
		const subResult = () => {
			console.log(findByName());
			emit('pushValue', findByName());
		};

		const findByName = () => {
			console.log(hhxy);
			if (hhxy.selectAddr) {
				let data = hhxy.clickData.filter((a) => a.address + a.name == hhxy.selectAddr);
				if (data && data.length > 0) {
					return data[0];
				}
			}
			return ''
		};

		const handSearchMap = () => {
			hhxy.localsearch.search(hhxy.inputAddr);
		};
		const localSearchResult = (res) => {
			console.log('返回信息', res);
			switch (parseInt(res.getResultType())) {
				case 1:
					//解析点数据结果
					getHPois(res.getPois());
					break;
				case 3:
					getHArea(res.getArea());
			}
		};
		const getHPois = (res) => {
			console.log('获取地点 getHPois', res);
			if (res) {
				hhxy.clickData = res;
			}
		};

		const getHArea = (res) => {
			console.log('获取地点 getHArea', res);
			if (res) {
				let T = hhxy.T;
				let map = hhxy.map;
				if (res.points) {
					var pointsArr = [];
					var points = obj.points;
					for (var i = 0; i < points.length; i++) {
						var regionLngLats = [];
						var regionArr = points[i].region.split(',');
						for (var m = 0; m < regionArr.length; m++) {
							var lnglatArr = regionArr[m].split(' ');
							var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
							regionLngLats.push(lnglat);
							pointsArr.push(lnglat);
						}
						let line = new T.Polyline(regionLngLats, {
							color: 'blue',
							weight: 3,
							opacity: 1,
							lineStyle: 'dashed',
						});
						map.addOverLay(line);
					}
					map.setViewport(pointsArr);
				}
				if (res.lonlat) {
					var regionArr = res.lonlat.split(',');
					map.panTo(new T.LngLat(regionArr[0], regionArr[1]));
				}
			}
		};

		const getServiceLonLat = () => {
			try{
				getLonLatService().then((res) => {
				if (res.data && res.data.LatandLong) {
					let lonlats = res.data.LatandLong;
					if (lonlats.length > 0) {
						let addrs = lonlats[0].result.ad_info;
						let search = addrs.province + addrs.city;
						hhxy.inputAddr = search;
						hhxy.localsearch.search(search);
						console.log('坐标返回', lonlats[0].result.province);
					}
				}
			});

			}catch(e){
				hhxy.inputAddr = hMapConf.addr;
			hhxy.localsearch.search(search);
			}
			
		};
		onMounted(() => {
			init();
		});
		return {
			...toRefs(hhxy),
			mouseUpStartMaker,
			subResult,
			handSearchMap,
		};
	},
};
</script>

<style scoped>
#infoDiv {
	width: 100%;
	height: 30vh;
}
.box {
	height: 30vh;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: #00000000;
}
</style>